<template>
  <div class="a-upload {{disabled ? 'a-upload-disabled' : ''}}">
    <!--    <div>{{nativeValue}}</div>-->
    <div class="u-flex u-aic u-jcsb upload-con">
      <slot name="content"></slot>
      <div class="u-flex u-aic u-jcc img-con" @tap="callTap">
        <div class="btn" v-if="!nativeValue"></div>
        <div class="img" v-if="!nativeValue" style="background-image: url({{bgi}})"></div>
        <div class="preview" v-if="nativeValue" style="background-image: url({{nativeValue}})"></div>
      </div>
    </div>
  </div>
</template>

<script>
  wx.onMemoryWarning(function () {
    console.log('onMemoryWarning')
  })

  const formEmitterBehavior = require('../../behaviors/emitter.behavior')
  const formELementBehavior = require('../../behaviors/form-element.behavior')

  export default {
    behaviors: [
      formEmitterBehavior,
      formELementBehavior
    ],
    relations: {
      '../mt-form-item/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
        linked(v) {
          this.formItem = v
          // console.log('this.formItem', this.formItem)
        },
        unlinked() {
          this.formItem = null
        }
      }
    },
    properties: {
      sModel: null,
      disabled: Boolean,
      bgi: String
    },
    observers: {
      'sModel': function (field) {
        // console.log('field', field, this.data.sModel)
        this.setNativeValue(this.data.sModel)
      }
    },
    attached() {
      this.formItem = null
    },
    data() {
      return {
        nativeValue: null
      }
    },
    methods: {
      init() {

      },
      callTap() {
        let self = this
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          // sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            // tempFilePath可以作为img标签的src属性显示图片
            let tempFilePaths = res.tempFilePaths
            console.log('tempFilePaths', tempFilePaths)

            wx.uploadFile({
              url: $global.config.request.base + '/upload/image/agent',
              filePath: tempFilePaths[0],
              name: 'file',
              formData: {
              },
              success (res){
                const data = JSON.parse(res.data)
                console.log('data', data.data.data.name)
                setTimeout(function () {
                  if (data.data.data.name) {
                    self.setNativeValue(data.data.data.name)
                  } else {
                    console.error('set failed', data)
                  }
                }, 150)
              }
            })
          }
        })
      },
      setNativeValue(val) {
        console.log('setNativeValue', val)
        this.callComponent(this.formItem, 'mtFormChange', [val])
        this.setData({
          nativeValue: val
        })
      }
    }
  }
</script>

<style lang="less">
  @import "../../app.component.less";

  @bor: "";
  @btn: "";

  .upload-con {
    size: 670pt 290pt;
    background-color: #f5f6fa;
    border-radius: 20pt;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 24pt;
    padding-right: 24pt;
  }

  .poc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .bg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .img-con {
    &:extend(.bg);
    width: 376pt;
    height: 248pt;
    background-image: url(@bor);
    position: relative;
  }

  .img {
    &:extend(.bg);
    &:extend(.poc);
    width: 362pt;
    height: 234pt;
    z-index: 101;
  }

  .preview {
    &:extend(.bg);
    &:extend(.poc);
    width: 362pt;
    height: 234pt;
    z-index: 100;
    background-size: cover;
  }

  .btn {
    &:extend(.bg);
    &:extend(.poc);
    size: 98pt;
    background-image: url(@btn);
    z-index: 102;
  }

</style>
